<%--
  Created by IntelliJ IDEA.
  User: zhouz
  Date: 2023/12/5
  Time: 15:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<select name="country" id="country">
    <option value="">请选择国家</option>
</select>

<select name="city">

</select>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.7.1.min.js"></script>

<script type="text/javascript">
    function init() {
        let url = "${pageContext.request.contextPath}/country/list";
        $.get(url, function (resp) {
            let countryArray = resp.data
            for (const country of countryArray) {
                let optionString = "<option value='" + country.id + "'>" + country.name + "</option>";
                $("#country").append(optionString);
            }
        })
    }

    $(function () {

        // 1. 初始化
        init();

        // 2. country下拉列表做onchange
        $("#country").change(function () {
            let url = "${pageContext.request.contextPath}/country/findCityListById/" + $("#country").val();
            $.get(url, function (resp) {
                // TODO
                // console.log(resp);
            });
        });
    })
</script>


</body>
</html>
